<!--
 * @Description: 盒子模型
 * @Author: rendc
 * @Date: 2025-09-15 09:40:25
 * @LastEditors: rendc
 * @LastEditTime: 2025-09-15 11:51:00
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型</title>
  <style>
    body {
      margin: 0;
      /* font-size: 0; */
    }

    /* 标签选择器 */
    /* div{} */
    /* 多选择器 */
    /* #div1,
    #div2 {
      border: 1px solid red;
    } */
    /* 类选择器 */
    .box {
      border: 1px solid red;
      /* 内容区宽高 */
      width: 50px;
      height: 50px;
      /* display: block; */
      /* display: inline; */
      display: inline-block;
      margin: 20px;
      /* margin: 20px 20px 20px 20px;
      margin: 20px 20px;
      margin-top: 20px;
      margin-right: 20px;
      margin-bottom: 20px;
      margin-left: 20px; */
      border-radius: 4px;
      padding: 10px;


    }

    #div1 {}

    #div2 {}

    .left,
    .right {
      box-sizing: border-box;
      border: 1px solid red;

      display: inline-block;
    }

    /* 内容盒子 */
    .content_box {
      box-sizing: content-box;
      /* 计算公式 */
      width: calc(50% - 2px);
      font-size: 16px;
    }

    .border_box {
      box-sizing: border-box;
      font-size: 16px;
      /* 计算公式 */
      /* width: calc(50%); */
      width: 50%;
    }

    #bgDiv {
      width: 200px;
      height: 200px;
      border: 1px solid green;
      display: inline-block;
      /* 背景图片地址 */
      background-image: url(./img/百度热搜橙色背景.png);
      /* 控制背景图片位置 */
      background-position: 0 0;
      /* 控制背景图片不重复 */
      background-repeat: no-repeat;
      /* 控制背景图片大小 默认情况*/
      background-size: cover;
    }
  </style>
</head>

<body>
  <div id="div1" class="box">盒子</div>
  <div id="div2" class="box">盒子</div>
  <div>
    箱子
  </div>
  <span>要求左右div各占页面宽度的50%，左右之间不能有间距</span>
  <h3>内容盒子 - 左右布局</h3>
  <div style="font-size: 0px;">
    <div class="left content_box">内容盒子 - 左</div>
    <div class="right content_box">内容盒子 - 右</div>
  </div>
  <h3>边框盒子 - 左右布局</h3>
  <div style="font-size: 0px;">
    <div class="left border_box">左</div>
    <div class="right border_box">右</div>
  </div>
  <h3>嵌套关系</h3>
  <div style="border: 1px solid green;">
    <div style="border: 1px solid hotpink;margin-top:20px;">内部</div>
  </div>
  <h3>背景图片</h3>
  <div style="width:200px;height: 200px; background-image: url(./img/百度热搜橙色背景.png);
  background-repeat:repeat-y">
  </div>
  <!-- <div style="background-color: #FF6035;">
    <img src="./img/百度热搜.png" alt="">
  </div> -->

  <h3>背景图片2</h3>
  <div id="bgDiv">
  </div>
</body>

</html>